import React,{Component}  from 'react';
import {connect} from 'react-redux';
import {increase,decrease,addToCart,cateList,goodsListByCate} from '../actions/counter'
var Link=require('react-router').Link;

class Counter extends Component{
    constructor() {
        super();
        this.state = {
            dataSource: ""
        };
    }
    componentWillMount(){
        this.props.cateList();
        this.props.goodsListByCate();
    }
    changePage(e){
        const page = e.target.getAttribute('data-page');
        const cateId=this.state.dataSource;
        const params = "page="+page+"&"+cateId;
        this.props.goodsListByCate(params)
    }
    change(e){
        const cateId=e.target.getAttribute('data-cateId');
        const params="categoryId="+cateId;
        this.props.goodsListByCate(params);
        this.setState({dataSource:params})
    }
    
    addCart(e){
        const idx = e.target.getAttribute('data-idx');
        const addToCartProduct = this.props.goodslist.rows[idx];
        this.props.addToCart(addToCartProduct)
    }

    render(){
        const {value,value1,lists,carts,increase,decrease,addToCart,cateList,catelist,goodslist,goodsListByCate,goodsListBySearch} = this.props;
        
        var good=goodslist.rows;
        var goodsData=[];
        var showData=[];
        var vm = this;
        function search(){
            const params="name="+vm.refs.searchValue.value;
            vm.props.goodsListByCate(params);
            goodsData=[];
        }
        {/*导航栏*/}
        if(catelist.length>0){
            var colList = [];
            var len=catelist.length;
            for(var i=0;i<len;i++){
                colList.push(
                    <li key={i} ><a href="javascript:void(0)" onClick={ (e)=>this.change(e)}  data-cateId={catelist[i]._id}>{catelist[i].title}</a></li>
                )
            }
            showData=colList;
        }
        {/*产品列表*/}
        if(good){
            var rowList = [];
            var goodsLen=good.length
			for (var i = 0; i < Math.ceil(goodsLen/4); i++) {
				var colList = [];
				for (var j = 0; j < 4; j++) {
                    var index= i*4+j;
			 	 	//加上记录数判断，如果下标索引值小于总的数组长度，则进行列表显示，否则不加入数据
					if(index<goodsLen){
                        var imgPath="http://localhost:3000/"+good[index].img[0].filename;
						colList.push(
							<div key={index} className="col-sm-3" id="goods">
                                 <div className="thumbnail">
                                     <img className="img-circle" src={imgPath} alt="Generic placeholder image"/>
                                     <div className="caption">
                                         <div className="moreContent">
                                             {good[index].name}
                                         </div>
                                         <p className="moreComment">
                                            <span className="left">¥:{good[index].price}&nbsp;&nbsp;</span>
                                            <span>库存:{good[index].stock}</span>
                                            <a href="javascript:void(0)" className="right">评价：{good[index].commentCount}条</a>
                                        </p>
                                        <div className="btnDiv">
                                            <button type="button"  className="btn btn-default add" data-idx={index} onClick={ (e)=> {this.addCart(e)} }><span className="glyphicon glyphicon-shopping-cart"></span>加入购物车</button>
                                            <button type="button" className="btn btn-default goPay"><Link to="/carts">去结算</Link></button>
                                        </div>
                                     </div>
                                 </div>      
			 		        </div>
						)
					}
                };
				rowList.push(
					<div className="row" key={i}>{colList}</div>
				)
			};
            goodsData = rowList;
        }
        {/*分页*/}
        var outputPages = [];
        if(good){
            var len=goodslist.pages;
            for(var i=1;i<=len;i++){
                outputPages.push(
                    <li key={i}><a href="javascript:void(0)" onClick={ (e)=>this.changePage(e) } data-page={i} >{i}</a></li>
                )
            }
        }
        return (
            <div id="goodsCenter">
                {/* 导航 */}
                <div className="bs-example" data-example-id="default-navbar">
                    <nav className="navbar navbar-default">
                        <div className="container-fluid">
                            <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <ul className="nav navbar-nav">
                                {showData}
                                </ul>
                                <form className="navbar-form navbar-left">
                                    <div className="form-group">
                                        <input type="text" ref='ipt' className="form-control" placeholder="Search"  ref="searchValue"/>
                                    </div>
                                    <button type="submit" className="btn btn-default" onClick={search}>搜索</button>
                                </form>
                            </div>
                        </div>
                    </nav>
                </div>
                {/*产品列表*/}
                {goodsData}
                {/*分页*/}
                <nav aria-label="..." id="pageNav">
                    <ul className="pagination" id="pageUl">
                        {outputPages}
                    </ul>
                </nav>
                <div className="sideCart">
                    <div id="end">购<br/>物<br/>车</div>    
                </div>                 
            </div>            
        )
    }
}

const getValue = (state)=>{
    return {
        value: state.reducer.count,
        value1: state.reducer.count1,
        lists: state.reducer.lists,
        catelist:state.reducer.catelist,
        goodslist:state.reducer.goodslist,
    }
}
const CounterContext = connect(getValue,{increase,decrease,addToCart,cateList,goodsListByCate})(Counter)


module.exports = CounterContext;